<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<title>Demo gWidgets</title>
	<?php include 'head.php' ?>
	<style type="text/css">
a.gbox img { border: 2px solid #000;}
#rules,#rules2,#rules3 { padding: 5px;}
#rules { width: 250px; }
#main{ margin: 10px; padding: 10px;}
#tabs {	width: 450px; }

#tab1 {
	background-color: #BBD9EE;
	overflow:auto;
	height: 400px;
	width: 550px;
	padding: 10px;
	border:none;
}

.gtab-body {
	height: 300px;
	border: none;
	overflow: auto;
}
</style>
</head>
<body>
<?php include 'nav.php'; ?>
<div id="container">
<h2><span class="widget">gExpander</span></h2>
<p>Here are some basic examples for gExpander:</p>
		<a href="sleep.php#rules" class="gexpander">Ajax Expander</a>
		<div id="rules" style="display:none;"></div>
	<div style="height:20px;"></div>
		
		<a href="sleep.php?content=404#rules2" class="gexpander">Ajax Expander with error</a>
	
	<div style="height:20px;"></div>
	
		<a href="#rules3" class="gexpander">inline Expander</a>
		<div id="rules3" style="display:none;">
			container content rules
		</div>


<h2><span class="widget">gTab</span></h2>
<p>One tab demo with inline content (tab 1 and 2) and remote (tab 3)</p>
	<div id="tabs" class="gtab">
		<ul class="widget-tab-head">
			<li><a href="#tab1">Tab 1</a></li>
			<li><a href="#tab2">and 2</a></li>
			<li><a href="sleep.php?content=lorem#tabmap">3 now?</a></li>
		</ul>
		<div id="tab1">
<p>Here is my first and default tab. What a useful tab! You can control each tab color, width, height,...through your
css.</p>
		</div>
		<div id="tab2">
			<p>hello here is an inline tab...</p>
		</div>
		<div id="tabmap">you should not see this message since it is an ajax content... </div>
</div>

<h2><span class="widget">gBox</span></h2>
<p>A list of possible boxes for you to test:</p>
<ul>
<li><a href="sleep.php?content=lorem" title="long text with overflow" class="gbox">long ajax content</a>, <a href="sleep.php?width=300&height=100#macau"  title="short text" class="gbox">short text and small window</a> and <a href="sleep.php?content=404&width=500&height=500"  title="short error text" class="gbox">404 error</a></li>
<li><a href="images/easttimor.jpg" class="gbox" title="East-Timor beach">a picture</a></li>
<li><a href="?width=700&height=450#assets" class="gbox" title="this is an inline content tab inside a modal window">inline content with tabs inside...</a></li>
</ul>
<div>
<a href="images/mp5.jpg" class="gbox" title="MP5 is here!"><img src="images/mp5.tn.jpg" alt="mp5"/></a>
<a href="sleep.php?content=404" class="gbox" title="404 error page"><img src="images/easttimor.tn.jpg" alt="east timor" /></a>
</div>
<h2><span class="widget">gTip</span></h2>
<p><a href="sleep.php?content=shortlorem&width=450" class="gtip" title="my tooltip title">ajax tooltip</a></p><p><a href="?width=280#inlinetooltip" class="gtip">first inline tooltip</a></p>
<p><input type="text" class="gtip" gtip="#inlinetooltip2" title="tooltip on input" value="click me to see"/></p>
<div id="inlinetooltip" style="display:none;">this is my first tooltip without any title, the height should adjust automatically, if not, please call the emergency...</div>
<div id="inlinetooltip2" style="display:none;">this is my second tooltip...</div>
<p style="height:190px">&nbsp;</p>
	<div id="assets" class="gtab" style="display:none">
		<ul class="widget-tab-head">
			<li><a href="#mymedia">My Media</a></li>
			<li><a href="#upload">Upload</a></li>
			<li><a href="sleep.php?content=lorem#flickr">Flickr</a></li>
		</ul>
		<div id="mymedia">
			lorem ipsum...
		</div>
		<div id="upload">my upload window...</div>
		<div id="flickr"></div>
	</div>
</div>
<div id="footer"><?php include 'footer.php' ?></div>
</body>
</html>